<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.nm }}</li>
    </ul>
  </div>
</template>

<script setup>
// 没有了创建阶段的生命周期
// 需要的话，可以直接写想要做的事情

// 其他的生命周期全部都是全面加一个on

// 因为现在变成了函数调用，所以生命周期都可以调用多次
import {
  ref,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
} from "vue";

// onBeforeMount(() => {
//   console.log("onBeforeMount");
// });

const list = ref([]);
onMounted(() => {
  // console.log("onMounted");
  fetch("http://118.24.239.63:3000/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      list.value = res.data;
    });
});

onMounted(() => {
  console.log("123");
});

// console.log("created");
</script>

<!-- <script>
export default {
  setup() {
    console.log("setup");
  },
};
</script> -->
